<template>
  <div class="container">
    <div class="font-w">
      <!-- <Logo /> -->
      <h1 class="title">文字素材</h1>

      <div>
        <el-table :data="mountains.file_list" style="width: 100%">
          <!-- <el-table-column prop="tl" label="日期" width="150">
          </el-table-column> -->
          <el-table-column prop="fl" label="姓名" width="100">
          </el-table-column>
          <el-table-column label="操作" width="100">
            <template #default="scope">
              <!-- <el-button @click="download(scope.row)" type="text" size="small"
                >下载</el-button
              > -->
              <a :href="'/api/filematerial/' + scope.row.fl">下载</a>

              <!-- <el-button type="text" size="small">编辑</el-button> -->
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
    <div class="image-w">
      <el-button @click="getnewm(item)" v-for="item in tabs" :key="item">
        {{ item }}
      </el-button>
      <h1 class="title">图片素材</h1>
      <div class="shucai_W">
        <div v-bind:key="item" v-for="item in hills.file_list" class="shucai">
          <!-- <h2>教材64-65页，完成《幼儿识图ppt（三）》步骤1到步骤3然后上传作业,累计15篇--解锁奧特曼系列</h2> -->
          <el-image
            style="width: 20vw; height: 20vw"
            :src="'/api/' + item"
            fit="cover"
            :alt="item"
            :preview-src-list="hills.file_list.map((it) => '/api/' + it)"
          ></el-image>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import axios from "axios";
export default {
  data() {
    return {
      mountains: [],
      hills: {},
      tabs: [
        "长征",
        "汽车展示",
        "中共一大",
        "北伐战争",
        "开国大典",
        "五四运动",
        "共产党一大",
        "土地革命",
        "改革开放",
        "抗日战争",
        // "多啦A梦",
        // "李焕英",
        // "温暖的抱抱",
        // "科比",
        // "节气",
        // "苏州大学",
        // "蓝精灵",
        // "阿尔卑斯山",
        // "阿尔卑斯山脉",
      ],
    };
  },
  // async asyncData({ $http })

  //     const mountains = await $http.$get('/api/listpdf')
  //     console.log(mountains,666)
  //     return { mountains }
  //   }
  mounted() {
    axios.get("/api/listpdf").then((res) => {
      this.mountains = res.data;
    });
    axios.get("/api/listf").then((res) => {
      this.hills = res.data;
    });
  },
  // async fetch() {
  //   this.mountains = await this.$axios.$get("/api/listpdf");
  //   this.hills = await this.$axios.$get("/api/listf");
  //   console.log(this.mountains, 666);
  // },
  methods: {
    async download(e) {
      //console.log(e.fl,888)
      await axios.get("/api/filematerial/" + e.fl);
    },
    // 获取new 素材
    async getnewm(a) {
      axios.get("/api/listf/" + a).then((res) => {
        console.log(res.data);
        this.hills = res.data;
      });
    },
  },
};
</script>

<style scoped>
.shucai_W {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
.shucai {
  margin: 1em 1em;
  width: 20vw;
}
.font-w {
  overflow: scroll;
  position: fixed;
  background-color: aliceblue;
  top: 19vh;
  height: 70vh;
  width: 19vw;
  z-index: 10;
}
.image-w {
  width: 100vw;
}
.title {
  text-align: center;
}
.container {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
</style>
